<template>
  <n-grid cols="24" item-responsive responsive="screen">
    <n-grid-item span="0 m:14">
      <div class="login-bg"></div>
    </n-grid-item>
    <n-grid-item span="24 m:10">
      <div
        class="h-[100vh] overflow-y-auto bg-white flex flex-col px-[50px] justify-center"
      >
        <img class="w-[162px]" src="~@/assets/login/logo.png" />
        <div class="form pt-20">
          <h2 class="pb-10 login-title">{{ $t("login.title") }}</h2>
          <n-form ref="formRef" :model="modelForm" :rules="rules">
            <n-form-item path="username" :label="$t('login.username')">
              <n-input
                v-model:value="modelForm.username"
                @keydown.enter.prevent
              />
            </n-form-item>
            <n-form-item path="password" :label="$t('login.password')">
              <n-input
                v-model:value="modelForm.password"
                type="password"
                @keydown.enter.prevent
              />
            </n-form-item>
            <n-grid cols="24" item-responsive responsive="screen">
              <n-grid-item span="12 m:18">
                <n-form-item path="validCode" :label="$t('login.captcha')">
                  <n-input
                    v-model:value="modelForm.validCode"
                    @keydown.enter.prevent
                  />
                </n-form-item>
              </n-grid-item>
              <n-grid-item span="12 m:6" class="flex justify-end items-center">
                <img
                  class="login-check-code"
                  :src="
                    randCodeData.requestCodeSuccess
                      ? randCodeData.randCodeImage
                      : '~@/assets/login/checkcode.png'
                  "
                  @click="handleChangeCheckCode"
                />
              </n-grid-item>
            </n-grid>
            <n-row :gutter="[0, 24]">
              <n-col :span="24">
                <n-button block type="primary" @click.stop="handleLogin">
                  {{ $t("login.login") }}
                </n-button>
              </n-col>
            </n-row>
          </n-form>
        </div>
      </div>
    </n-grid-item>
  </n-grid>
</template>
<script setup lang="ts">
import { getCodeInfo } from "@/api/sys/user.api";
import { onMounted, reactive, toRaw, ref } from "vue";
import { useUserStore } from "@/store/modules/user.store";
import { FormInst, useMessage } from "naive-ui";

const userStore = useUserStore();
const message = useMessage();

const formRef = ref<FormInst | null>(null);

const modelForm = reactive({
  username: "",
  password: "",
  validCode: "",
});

const rules = {
  username: {
    required: true,
    message: "请输入账号",
    trigger: "change",
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: "change",
  },
  validCode: {
    required: true,
    message: "请输入验证码",
    trigger: "change",
  },
};

const randCodeData = reactive({
  randCodeImage: "",
  requestCodeSuccess: false,
  checkKey: "",
});

const handleChangeCheckCode = () => {
  randCodeData.checkKey = "1629428467008"; //new Date().getTime();
  getCodeInfo(randCodeData.checkKey).then((res) => {
    console.log(res);
    randCodeData.randCodeImage = res.result;
    randCodeData.requestCodeSuccess = true;
  });
};

const handleLogin = () => {
  formRef.value?.validate(async (errors) => {
    if (errors) {
      message.error("请正确输入表单项");
      return;
    }
    await userStore.login(
      toRaw({
        password: modelForm.password,
        username: modelForm.username,
        captcha: modelForm.validCode,
        checkKey: randCodeData.checkKey,
      })
    );
  });
};

onMounted(() => {
  handleChangeCheckCode();
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
